<template>
	<view class="content">
		<view class="pageHeader">
			展业置权
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view class="flex aic" style="padding:20upx 40upx;background-color: #fff;">
			<image src="../../static/q-1.png" style="width: 28upx;height: 28upx;margin-right: 20upx;"></image>
			<view style="padding:0px 24upx;font-size: 26upx;color: #333;position: relative;" class="fundbox">
				<view v-if="fundList.length === 0">暂无抢到信息</view>
				<view style="width: 100%;position: absolute;top:0;left: 0;height: 30upx;" :class="{ marquee_top: animate }">
					<view v-for="(funditem, fundindex) in fundList" :key="fundindex">
						<view style="height: 30upx;line-height: 30upx;color: #333;width: 100%" class="goods-info">
							恭喜<text>{{ funditem.user.username | phoneCut }}</text>
							{{ funditem.exhibition_level.level_name}}置权申请成功
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view v-for="(item,index) in mypowerlist" :key="index" class="bg-white mypower">
				<view class="verti">{{item.name}}</view>
				<view class="flex powermsg">
					<txt class="ptxt">权益：</txt>
					<view>
						<view v-for="(pitem,pindex) in item.power">{{pitem}}</view>
					</view>
					<view class="rebtn" :class="[item.state?'tibtn':'sqbtn']" @click="comparePower(item.state,item.type)">{{item.state?'提货':'申请'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js';
	import {
	        mapState,  
	        mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				userToken: '', // token
				lunbotime: '',
				myinfo:{},
				mypowerlist:[{name:'经销商',type:0,state:null,power:['获取联盟商商品区县代理提货权','拥有展业区商品区县级区域市场分润权','获取经销商业绩分红收益']},
				{name:'代理商',state:null,type:1,power:['获取联盟商商品区县代理提货权','拥有展业区商品区县级区域市场分润权','获取经销商业绩分红收益']},
				{name:'合伙人',type:2,state:null,power:['获取联盟商商品区县代理提货权','拥有展业区商品区县级区域市场分润权','获取经销商业绩分红收益']}],
				// 滚动
				animate: false,
				fundList:[]
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.myinfo = that.userInfo.user
			that.mypowerlist[0].state = that.myinfo.distribution == '1'
			that.mypowerlist[1].state = that.myinfo.agent == '1'
			that.mypowerlist[2].state = that.myinfo.partner == '1'
			that.get_top_record()
		},
		created() {
			if (this.lunbotime) {
				clearInterval(this.lunbotime);
			} else {
				this.lunbotime = setInterval(this.showMarquee, 2000);
			}
		},
		filters: {
			phoneCut: function(str) {
				let newStr = '';
				if (str == '' || str == null) {
					newStr = '****';
				} else {
					newStr = str.substr(0, 3) + '****' + str.substr(7);
				}
				return newStr;
			}
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			showMarquee: function() {
				this.animate = true;
				setTimeout(() => {
					this.fundList.push(this.fundList[0]);
					this.fundList.shift();
					this.animate = false;
				}, 500);
			},
			//申请成功展业等级记录
			get_top_record() {
				let that = this;
				let pst = {
					m:0,
					n:8,
					exhibition_level_id:1
				};
				postAjax('Promotebusiness/promotebusinessrecord', pst, function(data) {
					that.fundList = data.code==0?data.data:[]
				});
			},
			comparePower(state,type){
				let ustate = state?1:0
				uni.navigateTo({
					url:'power?state='+ustate+'&type='+type
				})
			}
		}
	};
</script>

<style>
	.content {
		min-height: 100%;
		background-color: #f9f9f9;
	}
	.mypower{margin-top:16upx;position: relative;padding: 20upx 30upx;}
	.bg-white{background-color: #fff;}
	.verti{color: #1D84E8;font-size: 32upx;font-weight: 600;}
	.powermsg{padding-right: 100upx;font-size: 26upx;color: #666;margin-top: 26upx;line-height: 1.75;}
	.ptxt{min-width: 90upx;}
	
	.fundbox {
		height: 30upx;
		flex:1;
		overflow: hidden;
	}
	
	.marquee_top {
		transition: all 0.5s;
		margin-top: -30upx;
	}
	.pageHeader {
		width: 100%;
		height: 120upx;
		background-color: #1d84e8;
		line-height: 120upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 40upx;
		display: block;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	
	.rebtn {
		display: inline-block;
		font-size: 30upx;
		border-radius: 6upx;
		width: 120upx;
		height: 58upx;
		line-height: 58upx;
		position: absolute;
		top:20upx;
		right: 30upx;
		text-align: center;
	}

	.rebtn::after {
		border: none;
	}
	.tibtn {
		color:#FF4242;
		border: 2upx solid #FF4242;
		background-color: #fff;
	}
	.sqbtn{
		color:#fff;
		border: 2upx solid #FF4242;
		background-color: #FF4242;
	}
</style>
